<template>
  <div id="app">
    <h1>请选择你喜欢的专栏</h1>
    <div class="box"  v-for="(val,index) in arr" :key="index">
      <input type="checkbox" :value= 'val' v-model="checkArr"/>
      <span>{{val}}</span>
    </div>
    <div>
      <ul>
        <li v-for="(val,index) in checkArr" :key="index">{{val}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"],
      checkArr: []
    }
  }
}
</script>

<style scoped>
  .box {
    display: inline;
    font-size: 24px;
  }
  input {
    width: 20px;
    height: 20px;
  }
  li {
    list-style: none;
    font-size: 24px;
    color: #0f0;
  }

</style>
